<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
  const management = ref(null);

  function return1() {
    router.push({ path: "/dingdan/ding/management" });
  }

function getInfo() { 

  const managementStr = route.query.management;
  if (managementStr) {
    management.value = JSON.parse(managementStr);
  }
  console.log("接收的参数：",management.value);
  
}

getInfo();
</script>


<template>
<div class="father_contain">
<div class="head">
<h3>订单进度</h3>
<div style="padding: 0px 60px;">
    <div class="progress-steps">
      <div class="step active">
        <div class="xuhao"> 
            <div class="step-number">1</div>
            <div class="step-text1">已下单</div>
        </div>
        
        <div class="step-time">{{ management.createTime}}</div>
      </div>
      <div class="step-line"></div>
      <div :class="['step', management.orderStatus > 0 ? 'active' : '']">
        <div class="xuhao"> 
        <div class="step-number">2</div>
        <div class="step-text">已支付</div>
        </div>
      </div>
      <div class="step-line"></div>
      <div :class="['step', management.orderStatus > 1 ? 'active' : '']">
        <div class="xuhao"> 
        <div class="step-number">3</div>
        <div class="step-text">已执行</div>
        </div>
      </div>
      <div class="step-line"></div>
      <div :class="['step', management.orderStatus > 2 ? 'active' : '']">
        <div class="xuhao"> 
        <div class="step-number">4</div>
        <div class="step-text">已完成</div>
        </div>
      </div>
      </div>
</div>
</div>
<div class="main">
<h3>订单信息</h3>
<dl class="info-list">
  <!-- 第一行：2组信息 -->
  <div class="info-row">
    <div class="info-item">
      <dt>订单编号</dt>
      <dd>{{ management.orderNo || '暂无数据'}}</dd>
    </div>
    <div class="info-item">
      <dt>期望服务时间</dt>
      <dd>{{ management.expectedServiceTime || '暂无数据'}}</dd>
    </div>
  </div>
  <div class="info-row">
    <div class="info-item">
      <dt>老人姓名</dt>
      <dd>{{ management.elderly.name  || '暂无数据'}}</dd>
    </div>
    <div class="info-item">
      <dt>床位号</dt>
      <dd>{{ management.bedNo  || '暂无数据'}}</dd>
    </div>
  </div>
 
  <div class="info-row">
    <div class="info-item">
      <dt>护理项目名称</dt>
      <dd>{{ management.nursingItem.name || '暂无数据'}}</dd>
    </div>
    <div class="info-item">
      <dt>订单金额</dt>
      <dd>{{ management.nursingItem.price || '暂无数据'}}</dd>
    </div>
  </div>

  <div class="info-row">
    <div class="info-item">
      <dt>下单人</dt>
      <dd>{{ management.sysUser.userName || '暂无数据'}}</dd>
    </div>
    <div class="info-item">
      <dt>下单人手机号</dt>
      <dd>{{ management.sysUser.phonenumber || '暂无数据' }}</dd>
    </div>
  </div>
 
  <div class="info-row">
    <div class="info-item info-item--full">
      <dt>备注</dt>
      <dd>{{ management.remark  || '暂无数据'}}</dd>
    </div>
  </div> 
</dl>
</div>
<div class="foot">
<div> 
    <button class="return" @click="return1">返回</button>
</div>
</div>

</div>
  
</template>



<style scoped>

.father_contain{
    padding: 10px;

}
.head{
    
    width: 100%;
    height: 150px;
    padding: 1px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.main{
    width: 100%;
    height: 250px;
    padding: 1px 20px;
     background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.foot{
    width: 100%;
    height: 400px;
    padding: 10px 20px;
    text-align: center;
     background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 外层容器：清除默认样式，控制整体间距 */
.info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%; /* 占满父容器宽度，可根据需求调整固定宽度（如800px） */
}

/* 行容器：每行放2组信息，横向排列 */
.info-row {
  display: flex; /* 横向排列子元素 */
  justify-content: flex-start; /* 子元素靠左排列 */
  align-items: center; /* 子元素垂直居中 */
  margin-bottom: 15px; /* 行与行之间的间距，可调整 */
  gap: 20px; /* 两组信息之间的间距，可调整 */
}

/* 单个信息组：控制信息头和信息体的排列 */
.info-item {
  display: flex; /* 横向排列信息头（dt）和信息体（dd） */
  align-items: center; /* 垂直居中 */
  gap: 30px; /* 信息头和信息体之间的间距，可调整 */
  flex: 1; /* 让两组信息平分该行宽度 */
  min-width: 0; /* 解决文本过长时溢出问题 */
}

/* 信息头（dt）：右对齐 */
.info-item dt {
  margin: 0;
  padding: 0;
  color: #8e8e8e;
  text-align: right; /* 核心：信息头右对齐 */
  font-weight: 500; /* 可选：让信息头加粗，更醒目 */
  min-width: 100px; /* 可选：固定信息头宽度，避免不同组宽度不一致 */
}

/* 信息体（dd）：左对齐，处理长文本 */
.info-item dd {
  margin: 0;
  padding: 0;
  text-align: left; /* 核心：信息体左对齐 */
  flex: 1; /* 让信息体占满剩余空间 */
  white-space: nowrap; /* 可选：文本不换行，避免高度变化 */
  overflow: hidden; /* 可选：文本过长时隐藏 */
  text-overflow: ellipsis; /* 可选：文本过长时显示省略号（...） */
}

/* 单独占一行的信息组（如备注）：取消平分宽度，占满整行 */
.info-item--full {
  flex: none; /* 取消平分宽度 */
  width: 100%; /* 占满整行 */
}
.order-progress {
  margin: 20px;
}
.order-progress h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
.progress-steps {
  display: flex;
  align-items: center;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 5px;
}
.active .step-number {
  background-color: #007bff;
  color: #fff;
}
.step:not(.active) .step-number {
  border: 1px solid #ccc;
  color: #ccc;
}
.step-text {
  font-size: 20px;
  color: #777676;
  margin-bottom: 5px;
}
.step-text1 {
  font-size: 20px;
  color: #007bff;
  margin-bottom: 5px;
}
.step-time {
  margin-top:10px;
  font-size: 12px;
  color: #666;
}
.step-line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
  margin: 0 50px;
}
.xuhao{
    display: flex;
    padding-top: 10px;
    gap: 10px;
}
.return{
    margin-top: 350px;
    width: 80px;
    height: 30px;
    background-color: #007bff;
    color: white;
    border: #007bff;
    border-radius: 5px;
}
</style>